<template>
  <div class="changeInfo">
    <div class="content-wrap">
      <div class="change">
        <div class="left">
          同步信息列表
        </div>
        <div class="right">
          <at-button @click="clearCount" type="primary" :disabled="sync.tableData.add.length === 0 && sync.tableData.update.length === 0&& sync.tableData.delete.length === 0"><i class="saas-icon-icon-close"></i>清空同步信息</at-button>
          <at-button class="history" @click="roleHistory" type="primary"><i class="saas-icon-clock"></i>变更历史信息</at-button>
        </div>
      </div>
      <div class="content">
      <div class="role-wrap">
        <div class="add-role role">
        <div class="op-title">
          新增角色信息 <span :class="{'doubleNum':sync.tableData.add.length.toString().length === 2, 'singleNum': sync.tableData.add.length.toString().length === 1, 'more': sync.tableData.add.length>99, 'common': true}">  
              <span class="infoCount" v-if="sync.tableData.add.length<=99"> {{sync.tableData.add.length}}</span>  
              <span class="infoCount" v-else>{{sync.tableData.add.length}}</span>
            </span>
        </div>
        <div class="table-wrap">
          <at-table :data="sync.tableData.add" width="100%" max-height="251" :border="false" @sort-change='addSortChange'>
          <at-table-column sortable width="250px" align="left" prop="ar_time" label="变更时间"></at-table-column>
          <at-table-column width="250px" align="left" prop="role_id" label="角色Id"></at-table-column>
          <at-table-column width="250px" align="left" prop="role_name" label="角色名称"></at-table-column>
          <at-table-column align="left" prop="cn_name" label="功能权限" :show-overflow-tooltip="true"></at-table-column>
        </at-table> 
        </div>
      </div>
      </div>
      <div class="role-wrap">
        <div class="update-role role">
          <div class="op-title">
            修改角色信息 <span :class="{'doubleNum':sync.tableData.update.length.toString().length === 2, 'singleNum': sync.tableData.update.length.toString().length === 1, 'more': sync.tableData.update.length>99, 'common': true}">  
                <span class="infoCount" v-if="sync.tableData.update.length<=99"> {{sync.tableData.update.length}}</span>  
                <span class="infoCount" v-else>{{sync.tableData.update.length}}</span>
              </span>
          </div>
          <div class="table-wrap">
            <at-table :data="sync.tableData.update" width="100%" max-height="251" :border="false" @sort-change='updateSortChange'>
              <at-table-column sortable width="250px" align="left" prop="ar_time" label="变更时间"></at-table-column>
              <at-table-column width="250px" align="left" prop="role_id" label="角色Id"></at-table-column>
              <at-table-column width="250px" align="left" prop="role_name" label="角色名称"></at-table-column>
              <at-table-column align="left" prop="cn_name" label="功能权限" :show-overflow-tooltip="true"></at-table-column>
            </at-table> 
          </div>
        </div>
      </div>
      <div class="role-wrap">
        <div class="delete-role role">
        <div class="op-title">
          删除角色信息 <span :class="{'doubleNum':sync.tableData.delete.length.toString().length === 2, 'singleNum': sync.tableData.delete.length.toString().length === 1, 'more': sync.tableData.delete.length>99, 'common': true}">  
              <span class="infoCount" v-if="sync.tableData.delete.length<=99"> {{sync.tableData.delete.length}}</span>  
              <span class="infoCount" v-else>{{sync.tableData.delete.length}}</span>
            </span>
        </div>
        <div class="table-wrap">
          <at-table :data="sync.tableData.delete" width="100%" max-height="251" :border="false" @sort-change='deleteSortChange'>
          <at-table-column sortable width="250px" align="left" prop="ar_time" label="变更时间"></at-table-column>
          <at-table-column width="250px" align="left" prop="role_id" label="角色Id"></at-table-column>
          <at-table-column width="250px" align="left" prop="role_name" label="角色名称"></at-table-column>
          <at-table-column align="left" prop="cn_name" label="功能权限" :show-overflow-tooltip="true"></at-table-column>
        </at-table> 
        </div>
      </div>
      </div>
      </div>
    </div>
    <at-dialog title='提示' :visible.sync='clearDialogVisible' size='tiny'>
      <div class="dialog__body__content">
        <i class='saas-icon-cir-i'></i>确认清空
      </div>
      <div slot='footer' class='dialog-footer'>
        <at-button type='primary' @click.stop='clearConfirm'>确 定</at-button>
        <at-button @click.stop='clearCancel'>取 消</at-button>
      </div>
    </at-dialog>
  </div>
</template>
<script>
import { mapActions, mapMutations, mapGetters } from 'vuex'
export default {
  name: 'changeInfo',
  data () {
    return {
      clearDialogVisible: false,
      count: 102,
      primary: 'primary'
    }
  },
  computed: {
    ...mapGetters('role', [
      'sync'
    ])
  },
  methods: {
    ...mapActions('role', [
      'GET_SYNC_ADD',
      'GET_SYNC_UPDATE',
      'GET_SYNC_DELETE',
      'CLEAR_COUNT'
    ]),
    ...mapMutations('role', [
      'SET_SYNC_ORDER'
    ]),
    clearConfirm () {
      this.clearDialogVisible = false
      this.CLEAR_COUNT()
      // this.GET_SYNC_ADD()
      // this.GET_SYNC_UPDATE()
      // this.GET_SYNC_DELETE()
    },
    clearCancel () {
      this.clearDialogVisible = false
    },
    roleHistory () {
      this.$router.push({ name: '角色变更历史列表' })
    },
    deleteSortChange (column, prop, order) {
      let or = order === 'ascending' ? 'asc' : 'desc'
      this.SET_SYNC_ORDER({ type: 'delete', data: or })
      this.GET_SYNC_DELETE()
    },
    addSortChange (column, prop, order) {
      let or = order === 'ascending' ? 'asc' : 'desc'
      this.SET_SYNC_ORDER({ type: 'add', data: or })
      this.GET_SYNC_ADD()
    },
    updateSortChange (column, prop, order) {
      let or = order === 'ascending' ? 'asc' : 'desc'
      this.SET_SYNC_ORDER({ type: 'update', data: or })
      this.GET_SYNC_UPDATE()
    },
    // 清空变更信息
    clearCount () {
      this.clearDialogVisible = true
    }
  },
  mounted () {
    this.GET_SYNC_ADD()
    this.GET_SYNC_UPDATE()
    this.GET_SYNC_DELETE()
  }
}
</script>
<style>
.changeInfo .right .at-button {
  width: 110px;
}
.changeInfo .at-dialog__body {
  position: relative;
}
</style>
<style scoped>
.dialog__body__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.saas-icon-cir-i {
  font-size: 20px;
  color: red;
  vertical-align: -5px;
  display: inline-block;
  margin-left: 0px;
  padding-right: 5px;
}
.saas-icon-clock, .saas-icon-icon-close {
  font-size: 20px;
  vertical-align: -4px;
  margin-right: 5px;
}
.changeInfo {
  background: #fff;
  color: #5c6781;
}
.op-title {
  height: 50px;
  border-bottom: 1px solid #eee;
  line-height: 50px;
  padding-left: 20px;
  font-weight: bold;
}
.content-wrap {
  font-family: '宋体';
  background: #F1F2F6;
  min-height: 710px;
}
.table-wrap {
  padding: 0 20px;
}
.content {
  padding: 20px 20px 30px;
  background: #fff;
}
.role-wrap {
  border: 1px solid #eee;
  margin-bottom: 20px;
}
.role-wrap:last-child {
  margin-bottom: 0px;
}
.role {
  padding-bottom: 20px;
  background: #fff;
}
.change {
  line-height: 48px;
  height: 50px;
  padding-left: 20px;
  padding-right: 20px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.left {
  font-weight: bold;
  float: left;
  font-size: 14px;
}
.right {
  float: right;
}
.doubleNum {
  width: 25px;
  margin-top: 4px;
  border-radius: 8.5px;
}
.singleNum {
  width: 17px;
  border-radius: 8.5px;
}
.more {
  border-radius: 8.5px;
  padding: 0 5px;
}
.common {
  font-weight: bold;
  background: #1f92ef;
  display: inline-block;
  height: 17px;
}
.infoCount {
  display: block;
  color: #FFFFFF;
  height: 17px;
  line-height: 18px;
  text-align: center;
  font-size : 10px;
  -webkit-transform : scale(0.84,0.84);
  *font-size:10px;
}
</style>

